<template>
  <el-drawer
    ref="drawerBox"
    :before-close="handleClose"
    v-bind="$attrs"
    :close-on-press-escape="false"
    :size="setDrawerSize"
    :with-header="!showMobilePage"
    :class="{'mobileDrawer':showMobilePage}"
    :direction="showMobilePage ? 'btt' : 'rtl'"
    title="高级筛选"
    v-on="$listeners"
  >
    <div v-if="showMobilePage" class="filter-header">
      <Title title="高级筛选" style="margin:0"/>
      <div class="check-group">
        <slot name="checkGroup"/>
      </div>
    </div>
    <div v-else slot="title" class="pc-filter-header">
      <div class="pc-filter-header-title">高级筛选</div>
      <PresetFilter
        v-if="isShowConfig"
        ref="PresetFilterRef"
        :select-value-result="selectValueResult"
        :get-preset-filter="getPresetFilter"
        :preset-type="presetType"
        style="margin-left: 16px;"
        @queryClick="queryClick" />
    </div>
    <div :class="{'mobile-content':showMobilePage}" class="filter-content">
      <div class="fold-container">
        <el-form
          :class="{'mobile-el-form': showMobilePage}"
          :label-position="showMobilePage?'left':'right'"
          label-width="82px"
          class="filter-form"
          @submit.native.prevent>
          <div class="list-item">
            <slot name="itemPrev" />
            <!-- input -->
            <template v-if="inputFilterList && inputFilterList.length">
              <filterInput
                v-for="item in inputFilterList"
                :key="item.keyword"
                v-model="value"
                :item="item"
                class="filter-form-item"
                @queryClick="handleInputValChange">
                <template slot="append" slot-scope="props">
                  <slot :keyword="item.keyword" name="appendBox" />
                </template>
              </filterInput>
            </template>
            <!-- multiMonth -->
            <template v-if="multiMonthFilterList && multiMonthFilterList.length">
              <multiMonthPicker v-for="item in multiMonthFilterList" ref="multiRef" :key="item.keyword" v-model="value" :item="item" class="filter-form-item" @submitMonths="submitMonths" @resetMonths="resetMonths" />
            </template>
            <!-- rangeDate -->
            <template v-if="dateFilterList && dateFilterList.length">
              <template v-for="item in dateFilterList.filter(i => !i.disabled)">
                <filterDate v-if="item.type !== 'conditionSelect'" :key="item.keyword" v-model="value" :item="item" class="filter-form-item" @datePickerTime="datePickerTime"/>
                <filterSelect v-else :key="item.keyword" v-model="value" :item="item" @selectChange="selectChange"/>
              </template>
            </template>
          </div>
          <slot name="middleContentPlaceholder"/>
          <!-- select -->
          <div v-if="selectFilterList && selectFilterList.length" class="select-group">
            <filterSelect v-for="item in selectFilterList" :key="item.keyword" v-model="value" :item="item" @selectChange="selectChange"/>
            <slot name="selectAfterPlaceholder" />
          </div>
          <template v-if="extraFilterList && extraFilterList.length">
            <div v-for="(it, idx) in extraFilterList" :key="idx">
              <div class="fold-title">
                <img :src="it.icon" alt="title" >
                <div>{{ it.title }}</div>
              </div>
              <div class="extra-content">
                <div v-for="(item, index) in it.filterList" :key="item.keyword" class="extra-item">
                  <div v-if="index % 2 === 0 || showMobilePage" class="extra-box-border" />
                  <filterInput
                    v-if="['input', 'inputRange', 'inputSearch'].includes(item.type)"
                    v-model="value"
                    :item="item"
                    class="filter-form-item"
                    @queryClick="handleInputValChange">
                    <template slot="append" slot-scope="props">
                      <slot name="appendBox" />
                    </template>
                  </filterInput>
                  <filterDate v-else-if="['date', 'rangeDate', 'complexRangeDate'].includes(item.type)" v-model="value" :item="item" class="filter-form-item" @datePickerTime="datePickerTime"/>
                  <el-form-item v-else-if="['select', 'cascaderSelectWithChild', 'cascaderSelect', 'mulSelect', 'loadMoreSelect', 'regionSelect', 'addressSelect', 'conditionSelect'].includes(item.type)" :label="item.name" :label-width="item.labelWidth" class="extra-form-item">
                    <filterSelect v-model="value" :item="item" @selectChange="selectChange" @loadMoreFilter="loadMoreFilter" />
                  </el-form-item>
                </div>
              </div>
            </div>
          </template>
        </el-form>
        <slot />
      </div>
      <div v-if="!showMobilePage" class="filter-btn-container">
        <el-button class="filter-search-btn" type="primary" size="small" @click="queryClick(true)">查询</el-button>
        <div class="filter-img" @click="queryEmpty">
          <el-tooltip :open-delay="500" content="重置筛选" placement="top">
            <img :src="resetFilterIcon" alt="">
          </el-tooltip>
        </div>
        <el-button v-if="isShowConfig" type="primary" size="small" plain class="empty-btn-style quick-btn" @click="addFilter">添加快捷筛选</el-button>
      </div>
    </div>
    <AddFilter ref="addRef" :select-value-result="selectValueResult" @save="setPresetFilter" />
    <fixed-pagination v-if="showMobilePage">
      <div class="center">
        <el-button class="mobile-cancel" size="small" @click="queryEmpty">重置</el-button>
        <el-button class="mobile-search-btn" type="primary" size="small" @click="queryClick(true)">查询</el-button>
      </div>
    </fixed-pagination>
  </el-drawer>
</template>

<script>
import filterInput from '../input';
import filterSelect from '../select';
import filterDate from '../date';
import multiMonthPicker from '../multiMonthPicker';
import AddFilter from '@/components/Tool/module/PresetFilter/addDialog.vue';
import resetFilterIcon from '@/assets/setting/resetFilter.png';
import Title from '@/components/Title';
import { mapState } from 'vuex';
import PresetFilter from './PresetFilter';
import { isObjEqual } from '@/utils/tools';
export default {
  name: 'FilterDialog',
  components: {
    filterInput,
    filterSelect,
    filterDate,
    multiMonthPicker,
    Title,
    PresetFilter,
    AddFilter
  },
  model: {
    prop: 'value',
    event: 'changeValue'
  },
  props: {
    drawerSize: {
      type: Number,
      default: 0
    },
    filterList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    dateFilterList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    inputFilterList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    selectFilterList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    multiMonthFilterList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    realTimeFilter: { // 实时查询
      type: Boolean,
      default: false
    },
    value: {
      type: Object,
      default: () => {
        return {};
      }
    },
    isShowConfig: { // 是否可以快捷筛选条件
      type: Boolean,
      default: false
    },
    selectValueResult: {
      type: Array,
      default: null
    },
    customFilterList: {
      type: Array,
      default: null
    },
    extraFilterList: {
      type: Array,
      default: () => []
    },
    presetType: { // 预设选项类型, 1-资源, 2-微博效果
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      resetFilterIcon,
      singleDrawer: false, // 内容单行展示
      initFilterValue: null
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    setDrawerSize() {
      if (this.showMobilePage) return '70%';
      if (this.drawerSize) return this.drawerSize;
      return this.singleDrawer ? 380 : 760;
    }
  },
  watch: {
    filterList: {
      handler(list) {
        list && (list.length > 6 ? this.singleDrawer = false : this.singleDrawer = true);
      },
      immediate: true
    }
  },
  methods: {
    handleClose(done) {
      this.$emit('drawerHide');
      this.diffFilterVal();
      done();
    },
    addFilter() {
      this.$refs.addRef && this.$refs.addRef.openDialog();
    },
    setFilterVal() {
      this.$nextTick(() => {
        this.initFilterValue = _.cloneDeep(this.value);
      });
    },
    diffFilterVal() {
      const diffResult = isObjEqual(this.initFilterValue, this.value);
      !diffResult && this.$emit('queryClick');
    },
    queryEmpty() {
      this.$emit('queryEmpty');
      if (this.$refs.multiRef) this.$refs.multiRef[0].handleCancel();
    },
    handleInputValChange() {
      this.realTimeFilter && this.queryClick();
    },
    getPresetFilter() {
      return {
        value: this.value,
        filterParams: this.customFilterList
      };
    },
    queryClick(closeDrawer = false) {
      closeDrawer && this.$emit('drawerHide');
      this.$emit('queryClick');
    },
    datePickerTime(data) {
      this.$emit('datePickerTime', data);
    },
    selectChange(data) {
      this.$emit('selectChange', data);
    },
    submitMonths(data) {
      this.$emit('submitMonths', data);
    },
    loadMoreFilter(data) {
      this.$emit('loadMoreFilter', data);
    },
    resetMonths() {
      this.$emit('resetMonths');
    },
    setPresetFilter(name) {
      if (this.$refs.PresetFilterRef) {
        this.$refs.PresetFilterRef.setData(name);
      }
    }
  }
};
</script>

<style scoped lang="scss">
::v-deep {
  .el-drawer {
    max-width: 100vw;
    overflow: hidden;
  }
  .el-drawer__header {
    height: 48px;
    padding: 0 24px;
    margin: 0;
    box-shadow: 2px 4px 5px 0 rgba(221,225,234,0.3);
    > span {
      font-size: 14px;
      color: #333;
    }
  }
}

.mobileDrawer {
  .mobile-content {
    height: auto !important;
    padding-bottom: 80px;
    .fold-container {
      padding: 0 !important;
      @include scrollBar($x: hidden, $y: auto, $width: 2px);
      max-height: calc(60vh - 48px) !important;
      &::v-deep {
        .el-form {
          .filter-form-item:nth-child(odd) {
            margin-right: 0 !important;
          }
        }
      }
      .fold-title {
        padding-left: 34px;
      }
      .extra-content {
        padding-left: 34px;
        .extra-item {
          width: 100%;
          .extra-box-border::before {
            left: 4px;
          }
        }
      }
    }
    .select-group {
      justify-content: flex-start;
      padding-left: 14px;
    }
    .list-item {
      padding: 0 0 0 34px;
    }
  }
}
.filter-content {
  height: calc(100vh - 48px);
  overflow-y: hidden;
  position: relative;
  .fold-container {
    position: relative;
    max-height: calc(100% - 48px);
    @include scrollBar($width: 6px);
    padding: 20px 20px 0;
    &::v-deep {
      .el-form-item__label, .el-form-item__content {
        line-height: 32px !important;
      }
      .el-form {
        display: flex;
        flex-direction: column;
        .el-form-item {
          margin-bottom: 20px;
          &.select-form-item {
            .el-input {
              width: 100px;
            }
          }
          &.input-form-item {
            .el-input {
              width: 240px;
            }
          }
        }
        .filter-form-item:nth-child(odd) {
          margin-right: 32px;
          .condition-select-item {
            margin-right: 0 !important;
          }
        }
        .filter-form-item {
          .el-input, .el-textarea {
              width: 240px;
            }
        }
        .el-input__inner::-webkit-input-placeholder {
          color: #ddd;
        }
        .el-range-input::-webkit-input-placeholder {
          color: #ddd;
        }
      }
    }
    .fold-title {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      background-color: #f9f9f9;
      font-size: 14px;
      color: #333;
      padding: 10px 0 10px 8px;
      margin-bottom: 16px;
      img {
        width: 16px;
        height: 16px;
        margin-right: 4px;
      }
    }
    .extra-content {
      display: flex;
      flex-flow: row wrap;
      .extra-item {
        width: 50%;
        .extra-box-border {
          position: absolute;
          left: 20px;
          width: 1px;
          height: 52px;
          border-left: 2px solid #dde1ea;
        }
        .extra-box-border::before {
          position: absolute;
          left: 12px;
          top: 14px;
          content: '';
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #AEB6C7;
        }
        .extra-form-item {
          .filter-tool-select-item {
            margin-bottom: 0;
            margin-right: 32px;
            &::v-deep {
              .el-cascader, .el-select {
                width: 100%;
                .el-input {
                  width: 100% !important;
                  .el-input__inner {
                    width: 100% !important;
                    &::placeholder {
                      color: #C0C4CC !important;
                    }
                  }
                }
              }
              .el-cascader__tags {
                .el-cascader__search-input::placeholder {
                  color: #C0C4CC;
                }
              }
            }
          }
        }
        &:last-child {
          .extra-box-border {
            height: 32px;
          }
        }
      }
    }
  }
  .mobile-el-form {
    .filter-form-item {
      width: 100%;
    }
    ::v-deep {
      .filter-tool-select-item {
        flex-basis: 120px;
      }
      .el-form-item__label {
        width: 80px !important;
      }
      .el-form-item__content {
        margin-left: 80px !important;
      }
    }
  }
  .filter-btn-container {
    position: relative;
    height: 40px;
    display: flex;
    align-items: center;
    bottom: 0;
    padding: 0 20px;
    //box-shadow: 2px -4px 5px 0 rgba(221,225,234,0.3);
    .filter-search-btn {
      margin-right: 16px;
    }
    .cancel-btn-style {
      margin-left: 0 !important;
    }
    .filter-img {
      display: flex;
      align-items: center;
      cursor: pointer;
      img {
        width: 16px;
      }
    }
  }
  .list-item {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    &:first-child {
      border-top: none;
      padding-top: 0;
    }
  }
  .select-group {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
}
.mobileDrawer {
  ::v-deep {
    .el-drawer {
      border-radius: 20px 20px 0px 0px;
    }
    .el-drawer__body {
      min-width: 380px;
      overflow: unset;
    }
    .el-form {
      padding-bottom: 56px;
    }
  }
  .mobile-cancel {
    width: 120px;
    height: 36px;
    font-size: 16px;
    color: #406EFF;
    border-color: #406EFF !important;
    border-radius: 4px;
  }
  .mobile-search-btn {
    flex: 1;
    height: 36px;
    font-size: 16px;
    border-radius: 4px;
  }
}
.check-group {
  margin: 12px 0 0 10px;
}
.filter-header {
  padding: 12px 24px 12px 24px;
}
.pc-filter-header {
  display: flex;
  .pc-filter-header-title {
    display: flex;
    align-items: center;
    flex: 1;
    font-size: 16px;
    color: #333333;
  }
}
.empty-btn-style {
  border-color: #406EFF;
  background: #fff;
  color: #406EFF;
  padding: 7px 12px;
  text-align: center;
}
.quick-btn {
  position: absolute;
  right: 20px;
}
</style>

